import React, { Component, Fragment } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import { Button, Menu, Dropdown, Icon, Row, Col, Steps, Card, Popover, Badge, Table, Tooltip, Divider, } from 'antd';
import DescriptionList from '@/components/DescriptionList';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import styles from './style.less';
import Step1 from './Blocks/Step1'
import Step2 from './Blocks/Step2'
import Step3 from './Blocks/Step3'

const { Description } = DescriptionList;

const extra = (
  <Row gutter={32}>
    <Col xs={24} sm={12}>
      <div className={styles.textSecondary}>PV</div>
      <div className={styles.heading}>888</div>
    </Col>
    <Col xs={24} sm={12}>
      <div className={styles.textSecondary}>UV</div>
      <div className={styles.heading}>777</div>
    </Col>
  </Row>
);

const tabList = [
  { key: 'detail', tab: '详情' },
  { key: 'settings', tab: '配置' },
  { key: 'users', tab: '用户' }
];

@connect(({ profile, loading }) => ({
  profile,
  loading: loading.effects['profile/show'],
}))
class AdvancedProfile extends Component {
  state = {
    tabActiveKey: 'detail',
  };

  componentDidMount() {
    const { dispatch, location } = this.props;

    dispatch({
      type: 'profile/show',
      payload: { id: 1, ...location.query }
    });
  }

  componentWillUnmount() {

  }

  handleTabChange = value => {
    this.setState(state => ({
      ...state,
      tabActiveKey: value,
    }))
  }

  render() {
    const { profile, loading } = this.props;
    const { tabActiveKey } = this.state;

    const { data = {} } = profile;

    const description = (
      <DescriptionList className={styles.headerList} size="small" col="2">
        <Description term="发起人">{data.nickname}</Description>
        <Description term="开奖条件">{data.type === 0 ? '按时间抽奖' : data.type === 1 ? '按人数抽奖' : '其他'}</Description>
        <Description term="创建时间">{data.createdAt}</Description>
        <Description term="开奖人数"><a>{data.number}</a>人</Description>
        <Description term="结束日期">{data.createdAt} 至 {data.endAt ? data.endAt : '按人数抽奖'}</Description>
        <Description term="备注">{data.remark || '无'}</Description>
      </DescriptionList>
    );

    return (
      <PageHeaderWrapper
        title={`ID：${data.id || 0}`}
        content={description}
        tabList={tabList}
        action={moment().format('LLLL')}
        tabActiveKey={tabActiveKey}
        onTabChange={this.handleTabChange}
      >
        {
          tabActiveKey === 'detail'
          ?
            <Step1 {...data} />          
          :
          tabActiveKey === 'settings'
          ?
            <Step2 dataSource={data} /> 
          :
          tabActiveKey === 'users'
          ?
            <Step3 /> 
          :
            <Fragment>你能看到这个页面太厉害了</Fragment>
        }
      </PageHeaderWrapper>
    );
  }
}

export default AdvancedProfile;